<!-- @format -->

<template>
    <a-sub-menu :key="menuInfo.key" v-bind="$props" v-on="$listeners" class="menuSub">
        <span slot="title">
            <em :class="'iconfont '+menuInfo.icon" style="margin-right: 18px; margin-left: -16px"></em><span>{{ menuInfo.title }}</span>
        </span>
        <template v-for="item in menuInfo.children">
            <a-menu-item :key="item.key" v-if="!item.meta.hidden">
                {{ item.title }}
            </a-menu-item>
        </template>
    </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue'
export default {
    name: 'SubMenu',
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
        menuInfo: {
            type: Object,
            default: () => []
        }
    },
    created() {}
}
</script>
<style lang="less" scoped>
.menuSub {
    margin-top: -10px;
}
</style>
